require("../css/course.less")


window.onload = function () {
    // 把课程详情从会话存储中取出
    let data = JSON.parse(sessionStorage.getItem("videoList"))
    // 获取标签
    // 渲染
    let courseName = document.querySelector(".courseName")
    let degree = document.querySelector(".degree")
    let module = document.querySelector(".module")
    let Name = document.querySelector(".Name")
    let currentVideoImg = document.querySelector(".currentVideoImg")
    //  事件
    let progress = document.querySelector(".progress")
    let preBtn = document.querySelector(".preBtn")
    let pausedBtn = document.querySelector(".pausedBtn")
    let nextBtn = document.querySelector(".nextBtn")
    let video = document.querySelector(".video")
    let beginBtn = document.querySelector(".beginBtn")
    let endBtn = document.querySelector(".endBtn")
    // 全局变量
    let baseUrl = "http://139.9.177.51:8099"
    let index = 0
    // 渲染函数
    render()

    function render() {
        video.src = baseUrl + data[index].videoUrl
        courseName.textContent = data[index].title
        degree.innerText = `${index + 1}/${data.length}`
        Name.textContent = data[index].title
        currentVideoImg.src = baseUrl + data[index].imgUrl
    }
    // 点击上一步,返回上一个视频
    preBtn.addEventListener("click", function () {
        if (index > 0) {
            index--
            render()
        } else {
            tool.toast(0, "即将播放最后一个视频")
            setTimeout(function () {
                index = data.length - 1
                render()
            }, 2000)
        }

    })
    // 点击下一步,返回下一个视频
    nextBtn.addEventListener("click", function () {
        if (index < data.length - 1) {
            index++
            render()
        } else {
            tool.toast(0, "即将播放第一个视频")
            setTimeout(function () {
                index = 0
                render()
            }, 2000)
        }
    })
    // 暂停
    let flag = true
    // 可以点暂停按钮
    pausedBtn.addEventListener("click", function () {
        if (flag) {
            video.pause()
            // 点击暂停出现蒙层
            module.style.display = "block"
            
            flag = false
        } else {
            video.play()
            // 点击播放蒙层消失
            module.style.display = "none"
            flag = true
        }
    })
    // 也可以点击视频
    video.onclick = function () {
        if (flag) {
            video.pause();
            // 点击暂停出现蒙层
            module.style.display = "block"
            flag = false
        } else {
            video.play();
            flag = true
        }
    }
    module.addEventListener("click",function(e){
        if (e.target.id != "btn") {
            // 点击播放按钮以外的地方蒙层消失
            module.style.display = "none"
            video.play();
            flag = true
        }
    })
    // 点击继续,视频继续播放
    beginBtn.addEventListener("click", function () {
        video.play()
        module.style.display = "none"
        flag = true
    })
    // 点击结束,跳转到sport页面
    endBtn.addEventListener("click", function () {
        location.href = "sport.html"
    })
    
    // 进度条

    setInterval(function () {
        let duration = video.duration
        let currentTime = video.currentTime
        progress.style.width = (currentTime / duration) * 100 + "%"
    }, 100)


    // 视频播放结束,自动播放下一个视频
    video.addEventListener("ended", function () {
        if (index < data.length - 1) {
            index++
            render()
        }

    })

    // // 渲染函数
    // function render() {
    //     // 播放视频
    //     // 视频地址
    //     video.src = baseUrl + data[index].videoUrl
    //     // 课程名称
    //     courseName.innerText = data[index].title
    //     // 课程进度
    //     degree.textContent = `${index+1}/${data.length}`
    // }
    // // 先将获取的数据渲染到页面
    // render()

    // // 下一个按钮点击播放下一个视频
    // nextBtn.onclick = function () {
    //     if (index < data.length) {
    //         index++
    //         render()
    //     } else {
    //         tool.toast(0, "当前播放的是最后一个视频~")
    //     }
    // }
    // // 点击上一个按钮播放上一个视频
    // preBtn.onclick = function () {
    //     if (index > 0) {
    //         index--
    //         render()
    //     } else {
    //         tool.toast(0, "当前播放的是第一个视频~")
    //     }
    // }
    // // 暂停
    // let flag = true
    // pausedBtn.onclick = function () {
    //     if (flag) {
    //         video.pause();
    //         flag = false
    //     } else {
    //         video.play();
    //         flag = true
    //     }
    // }
    // video.onclick = function () {
    //     if (flag) {
    //         video.pause();
    //         flag = false
    //     } else {
    //         video.play();
    //         flag = true
    //     }
    // }
    // // 上一个视频暂停触发下一个视频的播放
    // video.addEventListener("ended", function () {
    //     if (index <= data.length - 1 && index >= 0) {
    //         index ++
    //         render()
    //     }
    // })
    // stopPro()
    // // 把计时函数的变量名做成全局变量,方便清除
    // let t = null

    // // 进度条
    // function stopPro(t) {
    //     return t = setInterval(function () {
    //         let duration = video.duration
    //         let currentTime = video.currentTime
    //         let totalWidth = video.offsetWidth
    //         // 得到进度条长度
    //         progress.style.width = (currentTime / duration * totalWidth) / 10 + "rem"
    //     }, 100)
    // }
    // // 视频结束,进度条的计时函数停止
    // video.addEventListener("ended", function () {
    //     clearInterval(t)
    // })


}